<template>
	<view class="login">
		<!-- 时尚背景元素 -->
		<view class="background-elements">
			<view class="bubble bubble-1"></view>
			<view class="bubble bubble-2"></view>
			<view class="bubble bubble-3"></view>
			<view class="bubble bubble-4"></view>
			<view class="bubble bubble-5"></view>
			<view class="bubble bubble-6"></view>
			<view class="bubble bubble-7"></view>
			<view class="bubble bubble-8"></view>
			<view class="dots"></view>
			<view class="line line-1"></view>
			<view class="line line-2"></view>
		</view>

		<!-- #ifndef  H5 -->
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
			<u-navbar :is-back="true" title="登录" :title-bold="true" :is-fixed="false" :border-bottom="false"
				:background="{ background: 'rgba(256,256, 256,0)' }"></u-navbar>
		</u-sticky>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="mpwx-login flex-col col-center">
			<image class="logo" :src="appConfig.shop_login_logo" mode="heightFix"></image>
			<button size="lg" class="white flex row-center btn" @tap="mnpLoginFun" hover-class="btn-hover">
				<text>微信一键登录</text>
			</button>
		</view>
		<mplogin-popup v-model="showLoginPop" :logo="appConfig.shop_login_logo" :title="appConfig.name"
			:login-data="loginData" @close="closePopup" @update="handleSubmitInfo" />
		<!--  #endif -->
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="acount-login">
			<image class="logo" :src="appConfig.shop_login_logo" mode="heightFix"></image>
			<block v-if="!phoneLogin">
				<!-- #ifdef H5-->
				<button size="lg" class="white flex row-center btn" @tap="getCodeUrl" hover-class="btn-hover"
					v-if="isOaWxAuth && isWeixin">
					<text>微信一键登录</text>
				</button>
				<!--  #endif -->
				<!-- #ifdef APP-PLUS -->
				<button size="lg" class="white flex row-center btn" @tap="appWxLogin" hover-class="btn-hover"
					v-if="appConfig.app_wechat_login">
					<text>微信一键登录</text>
				</button>
				<!--  #endif -->

				<button size="lg" class="white flex row-center phone-btn" @tap="togglePhoneLogin"
					hover-class="btn-hover">
					<text>手机号登录</text>
				</button>
			</block>
			<block v-if="phoneLogin">
				<view v-if="loginType == 0" style="width: 100%">
					<view class="input">
						<u-input v-model="mobile" style="width: 100%" placeholder="请输入手机号" :input-border="false" />
					</view>
					<view class="input">
						<u-input v-model="password" type="password" style="flex: 1" :password-icon="false"
							placeholder="请输入密码" :input-border="false" />
						<view
							style="width: 132rpx; border-left: 1rpx solid #ccc; padding-left: 20rpx; height: 60rpx; display: flex; align-items: center;"
							@tap.stop="navigateToForgetPwd" hover-class="text-hover">忘记密码</view>
					</view>
				</view>
				<view v-if="loginType == 1" style="width: 100%">
					<view class="input">
						<u-input v-model="telephone" style="width: 100%" placeholder="手机号" :input-border="false" />
					</view>
					<view class="input flex">
						<u-input v-model="smsCode" style="flex: 1" placeholder="请输入验证码" :input-border="false" />
						<view class="flex" :class="{ disable: telephone.length != 11 }">
							<view class="sms-btn primary flex row-center br60" @tap.stop="$sendSms">
								<!-- 获取验证码 -->
								<u-verification-code unique-key="login" ref="uCode" @change="codeChange">
								</u-verification-code>
								<view class="xs">{{ codeTips }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="m-t-30 flex" v-if="phoneLogin" style="width: 100%">
					<view class="checkbox-wrapper" @tap.stop="toggleAgreement">
						<view class="custom-checkbox" :class="{ 'checked': isAgreement }"></view>
						<view class="flex text-xs">
							已阅读并同意
							<view @tap.stop="navigateToServerExplan(0)" class="primary">《服务协议》</view>
							和
							<view @tap.stop="navigateToServerExplan(1)" class="primary">《隐私协议》</view>
						</view>
					</view>
				</view>
				<button size="lg" class="btn white flex row-center" :class="{ disable: disable }" type="primary"
					@tap="loginFun" @touchstart="createRipple" style="margin-top: 50rpx" hover-class="btn-hover">
					<text> 登录 </text>
					<view class="ripple-wrapper" ref="rippleWrapper">
						<view v-for="(ripple, index) in ripples" :key="index" 
							  class="ripple-circle" 
							  :style="{ left: ripple.x + 'px', top: ripple.y + 'px', animationDuration: ripple.duration + 'ms' }">
						</view>
					</view>
				</button>
				<view class="flex row-between m-t-30" style="width: 100%">
					<view class="action-link lighter" @tap.stop="changeLoginType" hover-class="text-hover">已有账号，使用
						<text style="color: #ff2c3c">{{
                            loginType == 0 ? '验证码登录' : '密码登录'
                        }}</text>
					</view>
					<view class="action-link lighter" @tap.stop="navigateToRegister" hover-class="text-hover">注册账号
					</view>
				</view>
			</block>
		</view>
		<!--  #endif -->

		<view class="flex p-l-60" v-if="!phoneLogin">
			<view class="checkbox-wrapper" @tap.stop="toggleAgreement">
				<view class="custom-checkbox" :class="{ 'checked': isAgreement }"></view>
				<view class="flex text-xs">
					已阅读并同意
					<view @tap.stop="navigateToServerExplan(0)" class="primary">《服务协议》</view>
					和
					<view @tap.stop="navigateToServerExplan(1)" class="primary">《隐私协议》</view>
				</view>
			</view>
		</view>
		<!-- 阅读协议弹框 -->
		<u-modal :value="showModel" show-cancel-button :show-title="false"
			@confirm=";(isAgreement = true), (showModel = false)" @cancel="showModel = false" confirm-color="#FF2C3C">
			<view class="comfirm-box">
				<view> 请先阅读并同意 </view>
				<view class="flex row-center">
					<view @tap.stop="navigateToServerExplan(0)" class="agreement">《服务协议》</view>
					和
					<view @tap.stop="navigateToServerExplan(1)" class="agreement">《隐私协议》</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex'
	import {
		accountLogin,
		codeLogin,
		sendSms,
		wxpLogin,
		smsCodeLogin,
		opLogin,
		authLogin,
		updateUser
	} from '@/api/app'
	import {
		bindSuperior
	} from '@/api/user'
	import wechath5 from '@/utils/wechath5'
	import {
		isWeixinClient,
		currentPage,
		client,
		trottle
	} from '@/utils/tools'
	import {
		SMSType
	} from '@/utils/type'
	import Cache from '@/utils/cache'
	import {
		BACK_URL,
		INVITE_CODE
	} from '@/config/cachekey'
	import {
		getWxCode,
		getUserProfile
	} from '@/utils/login'
	const loginType = {
		ACCOUNT_LOGIN: 0,
		SMS_CODE_LOGIN: 1
	}
	export default {
		data() {
			return {
				isAgreement: false,
				password: '',
				mobile: '',
				code: '',
				isWeixin: '',
				loginType: 0,
				smsCode: '',
				codeTips: '',
				telephone: '',
				text: '',
				showLoginPop: false,
				loginData: {},
				showModel: false,
				phoneLogin: false,
				ripples: [],
				rippleId: 0
			}
		},

		async onLoad(option) {
			this.mnpLoginFun = trottle(this.mnpLoginFun)
			this.appWxLogin = trottle(this.appWxLogin)
			this.getCodeUrl = trottle(this.getCodeUrl)
			// H5微信登录
			// #ifdef H5
			this.oaAutoLogin()
			// #endif
		},
		onUnload() {},
		methods: {
			...mapMutations(['login']),
			...mapActions(['getUser']),
			// 开启小程序微信授权
			isOaWxAuth() {
				const {
					h5_wechat_auth
				} = this.appConfig
				return h5_wechat_auth
			},
			codeChange(tip) {
				this.codeTips = tip
			},
			// 添加的新方法
			togglePhoneLogin() {
				uni.vibrateShort();
				this.phoneLogin = !this.phoneLogin;
			},
			navigateToForgetPwd() {
				uni.vibrateShort();
				uni.navigateTo({
					url: '/pages/forget_pwd/forget_pwd'
				});
			},
			navigateToRegister() {
				uni.vibrateShort();
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},
			navigateToServerExplan(type) {
				uni.vibrateShort();
				uni.navigateTo({
					url: `/bundle/pages/server_explan/server_explan?type=${type}`
				});
			},
			toggleAgreement() {
				uni.vibrateShort();
				this.isAgreement = !this.isAgreement;
			},
			// 原有方法
			getCodeUrl() {
				if (!this.isAgreement)
					return (this.showModel = true)
				uni.vibrateShort();
				wechath5.getWxUrl()
			},
			// 公众号微信登录
			async oaLogin(code) {
				const data = await wechath5.authLogin(code)
				this.loginHandle(data)
			},
			oaAutoLogin() {
				// H5微信登录
				const {
					code
				} = this.$Route.query
				this.isWeixin = isWeixinClient()
				if (this.isLogin) {
					// 已经登录 => 首页
					uni.switchTab({
						url: '/pages/index/index'
					})
					return
				}
				if (code) {
					// 带有code => 登录
					return this.oaLogin(code)
				}
			},
			// 小程序登录
			async mnpLoginFun() {
				if (!this.isAgreement)
					return (this.showModel = true)
				uni.vibrateShort();
				try {
					const {
						userInfo: {
							avatarUrl,
							nickName,
							gender
						}
					} = await getUserProfile()
					uni.showLoading({
						title: '登录中...',
						mask: true
					})
					const wxCode = await getWxCode()
					const {
						code,
						data,
						msg
					} = await authLogin({
						code: wxCode,
						nickname: nickName,
						headimgurl: avatarUrl
					})
					if (code == 1) {
						if (data.is_new_user) {
							uni.hideLoading()
							this.showLoginPop = true
							this.loginData = data
						} else {
							this.loginHandle(data)
						}
					} else {
						this.$toast({
							title: msg
						})
					}
				} catch (e) {
					console.error(e);
					uni.hideLoading();
					this.$toast({
						title: '登录失败，请重试'
					});
				}
			},
			// 账号登录
			async loginFun() {
				const {
					mobile,
					password,
					telephone,
					smsCode
				} = this
				
				if (this.loginType == 0) {
					// 先检查基本输入
					if (!mobile) {
						this.$toast({
							title: '请输入账户/手机号'
						})
						return
					}
					if (!password) {
						this.$toast({
							title: '请输入密码'
						})
						return
					}
					
					// 再检查是否同意协议
					if (!this.isAgreement) {
						this.showModel = true;
						return;
					}
					
					uni.vibrateShort();
					try {
						const {
							code,
							data
						} = await accountLogin({
							mobile,
							password,
							client: client
						})
						if (code == 1) {
							this.loginHandle(data)
						}
					} catch (e) {
						console.error(e);
						this.$toast({
							title: '登录失败，请重试'
						});
					}
				} else {
					// 先检查基本输入
					if (!telephone) {
						this.$toast({
							title: '请输入手机号'
						})
						return
					}
					if (!smsCode) {
						this.$toast({
							title: '请输入验证码'
						})
						return
					}
					
					// 再检查是否同意协议
					if (!this.isAgreement) {
						this.showModel = true;
						return;
					}
					
					uni.vibrateShort();
					try {
						const res = await smsCodeLogin({
							mobile: telephone,
							code: smsCode
						});
						if (res.code == 1) {
							this.loginHandle(res.data)
						}
					} catch (e) {
						console.error(e);
						this.$toast({
							title: '登录失败，请重试'
						});
					}
				}
			},
			//微信登陆
			async appWxLogin() {
				if (!this.isAgreement)
					return (this.showModel = true)
					
					console.log(7777777)
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log(res,99999999)
						uni.showLoading({
							title: '登录中...',
							mask: true
						})
						const { openid, access_token } = res.authResult
						opLogin({
							openid,
							access_token
						})
							.then((res) => {
								uni.hideLoading()
								if (res.code == 1) {
									this.loginHandle(res.data)
								}
							})
							.catch(() => {
								uni.hideLoading()
							})
					},
					complete:(res)=>{
						
						console.log(res,55555)
					}
				})
			},
			// 登录结果处理
			async loginHandle(data) {
				console.log(data);
				// return;
				this.login(data)
				uni.hideLoading()
				// 绑定邀请码
				const inviteCode = Cache.get(INVITE_CODE)
				if (inviteCode) {
					bindSuperior({
						code: inviteCode
					})
					Cache.remove(INVITE_CODE)
				}

				if (getCurrentPages().length > 1) {
					uni.navigateBack({
						success() {
							const {
								onLoad,
								options
							} = currentPage()
							onLoad && onLoad(options)
						}
					})
				} else if (Cache.get(BACK_URL)) {
					this.$Router.replace(Cache.get(BACK_URL))
				} else {
					this.$Router.pushTab('/pages/index/index')
				}
				Cache.remove(BACK_URL)
			},
			changeLoginType() {
				uni.vibrateShort();
				if (this.loginType == loginType.ACCOUNT_LOGIN) {
					this.loginType = loginType.SMS_CODE_LOGIN
				} else if (this.loginType == loginType.SMS_CODE_LOGIN) {
					this.loginType = loginType.ACCOUNT_LOGIN
				}
			},
			// 发送验证码
			$sendSms() {
				if (!this.$refs.uCode.canGetCode) return
				if (!this.telephone) {
					this.$toast({
						title: '请输入手机号'
					})
					return
				}
				uni.vibrateShort();
				sendSms({
					mobile: this.telephone,
					key: SMSType.LOGIN
				}).then((res) => {
					this.$refs.uCode.start()
				})
			},
			handleBtnTouch() {
				uni.vibrateShort();
			},
			createRipple(e) {
				uni.vibrateShort();
				
				// 获取按钮的位置信息
				const query = uni.createSelectorQuery().in(this);
				query.select('.btn').boundingClientRect(data => {
					if (!data) return;
					
					// 计算点击位置相对于按钮的坐标
					const touch = e.touches[0];
					const x = touch.clientX - data.left;
					const y = touch.clientY - data.top;
					
					// 计算按钮对角线长度作为波纹直径
					const buttonWidth = data.width;
					const buttonHeight = data.height;
					const diameter = Math.max(buttonWidth, buttonHeight) * 2;
					
					// 创建新的波纹
					const ripple = {
						id: this.rippleId++,
						x: x - diameter / 2, // 居中定位波纹
						y: y - diameter / 2,
						size: diameter,
						duration: 800 // 波纹动画持续时间
					};
					
					// 添加波纹到数组
					this.ripples.push(ripple);
					
					// 动画结束后移除波纹
					setTimeout(() => {
						const index = this.ripples.findIndex(r => r.id === ripple.id);
						if (index !== -1) {
							this.ripples.splice(index, 1);
						}
					}, ripple.duration);
				}).exec();
			},
		},
		computed: {
			...mapGetters(['appConfig', 'isLogin']),
			disable() {
				const {
					loginType,
					telephone,
					smsCode,
					mobile,
					password,
					isAgreement
				} = this

				if (!isAgreement) return true
				if (loginType == 0) {
					return !mobile || !password
				} else {
					return !telephone || !smsCode
				}
			}
		}
	}
</script>

<style lang="scss">
	/* 水泡动画关键帧定义 */
	@keyframes bubbleFloat1 {
		0% {
			transform: translate(0, 0) scale(1) rotate(0deg);
			border-radius: 50%;
			background: linear-gradient(45deg, rgba(255, 44, 60, 0.06), rgba(255, 92, 108, 0.06));
			box-shadow: inset 0 0 10rpx rgba(255, 44, 60, 0.1);
		}
		25% {
			transform: translate(-30rpx, 30rpx) scale(1.1) rotate(5deg);
			border-radius: 60% 40% 55% 45%;
			background: linear-gradient(45deg, rgba(255, 44, 60, 0.08), rgba(255, 92, 108, 0.08));
			box-shadow: inset 0 0 15rpx rgba(255, 44, 60, 0.15);
		}
		50% {
			transform: translate(20rpx, -25rpx) scale(0.9) rotate(-5deg);
			border-radius: 40% 60% 45% 55%;
			background: linear-gradient(45deg, rgba(255, 44, 60, 0.06), rgba(255, 92, 108, 0.06));
			box-shadow: inset 0 0 8rpx rgba(255, 44, 60, 0.08);
		}
		75% {
			transform: translate(-25rpx, -20rpx) scale(1.05) rotate(3deg);
			border-radius: 55% 45% 65% 35%;
			background: linear-gradient(45deg, rgba(255, 44, 60, 0.07), rgba(255, 92, 108, 0.07));
			box-shadow: inset 0 0 12rpx rgba(255, 44, 60, 0.12);
		}
		100% {
			transform: translate(25rpx, 20rpx) scale(0.95) rotate(-2deg);
			border-radius: 45% 55% 35% 65%;
			background: linear-gradient(45deg, rgba(255, 44, 60, 0.06), rgba(255, 92, 108, 0.06));
			box-shadow: inset 0 0 10rpx rgba(255, 44, 60, 0.1);
		}
	}

	@keyframes bubbleFloat2 {
		0% {
			transform: translate(0, 0) scale(1) rotate(0deg);
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(255, 44, 60, 0.06), rgba(255, 140, 124, 0.06));
			box-shadow: inset 0 0 10rpx rgba(255, 44, 60, 0.1);
		}
		25% {
			transform: translate(40rpx, -30rpx) scale(1.1) rotate(-4deg);
			border-radius: 40% 60% 45% 55%;
			background: linear-gradient(135deg, rgba(255, 44, 60, 0.08), rgba(255, 140, 124, 0.08));
			box-shadow: inset 0 0 15rpx rgba(255, 44, 60, 0.15);
		}
		50% {
			transform: translate(-35rpx, 35rpx) scale(0.9) rotate(6deg);
			border-radius: 55% 45% 60% 40%;
			background: linear-gradient(135deg, rgba(255, 44, 60, 0.06), rgba(255, 140, 124, 0.06));
			box-shadow: inset 0 0 8rpx rgba(255, 44, 60, 0.08);
		}
		75% {
			transform: translate(30rpx, 40rpx) scale(1.05) rotate(-2deg);
			border-radius: 45% 55% 40% 60%;
			background: linear-gradient(135deg, rgba(255, 44, 60, 0.07), rgba(255, 140, 124, 0.07));
			box-shadow: inset 0 0 12rpx rgba(255, 44, 60, 0.12);
		}
		100% {
			transform: translate(-40rpx, -35rpx) scale(0.95) rotate(3deg);
			border-radius: 60% 40% 50% 50%;
			background: linear-gradient(135deg, rgba(255, 44, 60, 0.06), rgba(255, 140, 124, 0.06));
			box-shadow: inset 0 0 10rpx rgba(255, 44, 60, 0.1);
		}
	}

	@keyframes bubbleFloat3 {
		0% {
			transform: translate(0, 0) scale(1) rotate(0deg);
			border-radius: 50%;
			background: linear-gradient(225deg, rgba(74, 222, 128, 0.05), rgba(134, 239, 172, 0.05));
			box-shadow: inset 0 0 8rpx rgba(74, 222, 128, 0.08);
		}
		33% {
			transform: translate(25rpx, -25rpx) scale(1.15) rotate(5deg);
			border-radius: 45% 55% 50% 50%;
			background: linear-gradient(225deg, rgba(74, 222, 128, 0.07), rgba(134, 239, 172, 0.07));
			box-shadow: inset 0 0 12rpx rgba(74, 222, 128, 0.12);
		}
		66% {
			transform: translate(-30rpx, 20rpx) scale(0.9) rotate(-8deg);
			border-radius: 60% 40% 45% 55%;
			background: linear-gradient(225deg, rgba(74, 222, 128, 0.05), rgba(134, 239, 172, 0.05));
			box-shadow: inset 0 0 6rpx rgba(74, 222, 128, 0.06);
		}
		100% {
			transform: translate(20rpx, 30rpx) scale(1.05) rotate(3deg);
			border-radius: 50%;
			background: linear-gradient(225deg, rgba(74, 222, 128, 0.06), rgba(134, 239, 172, 0.06));
			box-shadow: inset 0 0 10rpx rgba(74, 222, 128, 0.1);
		}
	}

	@keyframes bubbleFloat4 {
		0% {
			transform: translate(0, 0) scale(1) rotate(0deg);
			border-radius: 50%;
			background: linear-gradient(315deg, rgba(56, 189, 248, 0.05), rgba(125, 211, 252, 0.05));
			box-shadow: inset 0 0 8rpx rgba(56, 189, 248, 0.08);
		}
		33% {
			transform: translate(-25rpx, -20rpx) scale(1.1) rotate(-5deg);
			border-radius: 40% 60% 45% 55%;
			background: linear-gradient(315deg, rgba(56, 189, 248, 0.07), rgba(125, 211, 252, 0.07));
			box-shadow: inset 0 0 12rpx rgba(56, 189, 248, 0.12);
		}
		66% {
			transform: translate(20rpx, 25rpx) scale(0.9) rotate(8deg);
			border-radius: 55% 45% 60% 40%;
			background: linear-gradient(315deg, rgba(56, 189, 248, 0.05), rgba(125, 211, 252, 0.05));
			box-shadow: inset 0 0 6rpx rgba(56, 189, 248, 0.06);
		}
		100% {
			transform: translate(-20rpx, 20rpx) scale(1.05) rotate(-3deg);
			border-radius: 50%;
			background: linear-gradient(315deg, rgba(56, 189, 248, 0.06), rgba(125, 211, 252, 0.06));
			box-shadow: inset 0 0 10rpx rgba(56, 189, 248, 0.1);
		}
	}

	@keyframes bubbleFloat5 {
		0% {
			transform: translate(0, 0) scale(1) rotate(0deg);
			border-radius: 50%;
			background: linear-gradient(90deg, rgba(232, 121, 249, 0.06), rgba(216, 180, 254, 0.06));
			box-shadow: inset 0 0 8rpx rgba(232, 121, 249, 0.08);
		}
		33% {
			transform: translate(20rpx, 20rpx) scale(1.15) rotate(5deg);
			border-radius: 42% 58% 38% 62%;
			background: linear-gradient(90deg, rgba(232, 121, 249, 0.07), rgba(216, 180, 254, 0.07));
			box-shadow: inset 0 0 12rpx rgba(232, 121, 249, 0.12);
		}
		66% {
			transform: translate(-25rpx, -20rpx) scale(0.9) rotate(-8deg);
			border-radius: 58% 42% 62% 38%;
			background: linear-gradient(90deg, rgba(232, 121, 249, 0.05), rgba(216, 180, 254, 0.05));
			box-shadow: inset 0 0 6rpx rgba(232, 121, 249, 0.06);
		}
		100% {
			transform: translate(15rpx, -25rpx) scale(1.05) rotate(3deg);
			border-radius: 50%;
			background: linear-gradient(90deg, rgba(232, 121, 249, 0.06), rgba(216, 180, 254, 0.06));
			box-shadow: inset 0 0 10rpx rgba(232, 121, 249, 0.1);
		}
	}

	@keyframes bubbleFloat6 {
		0% {
			transform: translate(0, 0) scale(1);
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(251, 113, 133, 0.05), rgba(253, 164, 175, 0.05));
			box-shadow: inset 0 0 8rpx rgba(251, 113, 133, 0.08);
		}
		33% {
			transform: translate(-20rpx, 15rpx) scale(1.1);
			border-radius: 45% 55% 40% 60%;
			background: linear-gradient(135deg, rgba(251, 113, 133, 0.07), rgba(253, 164, 175, 0.07));
			box-shadow: inset 0 0 12rpx rgba(251, 113, 133, 0.12);
		}
		66% {
			transform: translate(15rpx, -20rpx) scale(0.9);
			border-radius: 55% 45% 60% 40%;
			background: linear-gradient(135deg, rgba(251, 113, 133, 0.05), rgba(253, 164, 175, 0.05));
			box-shadow: inset 0 0 6rpx rgba(251, 113, 133, 0.06);
		}
		100% {
			transform: translate(-15rpx, -15rpx) scale(1);
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(251, 113, 133, 0.06), rgba(253, 164, 175, 0.06));
			box-shadow: inset 0 0 10rpx rgba(251, 113, 133, 0.1);
		}
	}

	@keyframes bubbleFloat7 {
		0% {
			transform: translate(0, 0) scale(1);
			border-radius: 50%;
			background: linear-gradient(225deg, rgba(251, 191, 36, 0.05), rgba(253, 224, 71, 0.05));
			box-shadow: inset 0 0 8rpx rgba(251, 191, 36, 0.08);
		}
		33% {
			transform: translate(15rpx, -15rpx) scale(1.1);
			border-radius: 45% 55% 40% 60%;
			background: linear-gradient(225deg, rgba(251, 191, 36, 0.07), rgba(253, 224, 71, 0.07));
			box-shadow: inset 0 0 12rpx rgba(251, 191, 36, 0.12);
		}
		66% {
			transform: translate(-15rpx, 15rpx) scale(0.9);
			border-radius: 55% 45% 60% 40%;
			background: linear-gradient(225deg, rgba(251, 191, 36, 0.05), rgba(253, 224, 71, 0.05));
			box-shadow: inset 0 0 6rpx rgba(251, 191, 36, 0.06);
		}
		100% {
			transform: translate(15rpx, 15rpx) scale(1);
			border-radius: 50%;
			background: linear-gradient(225deg, rgba(251, 191, 36, 0.06), rgba(253, 224, 71, 0.06));
			box-shadow: inset 0 0 10rpx rgba(251, 191, 36, 0.1);
		}
	}

	@keyframes bubbleFloat8 {
		0% {
			transform: translate(0, 0) scale(1);
			border-radius: 50%;
			background: linear-gradient(45deg, rgba(6, 182, 212, 0.05), rgba(125, 211, 252, 0.05));
			box-shadow: inset 0 0 8rpx rgba(6, 182, 212, 0.08);
		}
		33% {
			transform: translate(-15rpx, 15rpx) scale(1.1);
			border-radius: 45% 55% 40% 60%;
			background: linear-gradient(45deg, rgba(6, 182, 212, 0.07), rgba(125, 211, 252, 0.07));
			box-shadow: inset 0 0 12rpx rgba(6, 182, 212, 0.12);
		}
		66% {
			transform: translate(15rpx, -15rpx) scale(0.9);
			border-radius: 55% 45% 60% 40%;
			background: linear-gradient(45deg, rgba(6, 182, 212, 0.05), rgba(125, 211, 252, 0.05));
			box-shadow: inset 0 0 6rpx rgba(6, 182, 212, 0.06);
		}
		100% {
			transform: translate(-15rpx, -15rpx) scale(1);
			border-radius: 50%;
			background: linear-gradient(45deg, rgba(6, 182, 212, 0.06), rgba(125, 211, 252, 0.06));
			box-shadow: inset 0 0 10rpx rgba(6, 182, 212, 0.1);
		}
	}

	@keyframes floatDots {
		0% {
			transform: translate(0, 0) rotate(0deg);
		}
		33% {
			transform: translate(-25rpx, 15rpx) rotate(-2deg);
		}
		66% {
			transform: translate(20rpx, -25rpx) rotate(2deg);
		}
		100% {
			transform: translate(-10rpx, 10rpx) rotate(-1deg);
		}
	}

	@keyframes floatLine1 {
		0% {
			transform: translateY(0) rotate(15deg) scaleX(1);
		}
		50% {
			transform: translateY(-15rpx) rotate(18deg) scaleX(1.1);
		}
		100% {
			transform: translateY(15rpx) rotate(12deg) scaleX(0.9);
		}
	}

	@keyframes floatLine2 {
		0% {
			transform: translateX(0) rotate(-10deg) scaleX(1);
		}
		50% {
			transform: translateX(25rpx) rotate(-13deg) scaleX(1.2);
		}
		100% {
			transform: translateX(-25rpx) rotate(-8deg) scaleX(0.8);
		}
	}

	page {
		background-color: #fff;
		text-align: center;
		padding: 0;
		background-image: linear-gradient(to bottom, #f8f9fa, #e9ecef);

		.login {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 1;

			.background-elements {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
				z-index: 0;
				pointer-events: none;
				overflow: hidden;

				.bubble {
					position: absolute;
					border-radius: 50%;
					backdrop-filter: blur(2px);
					box-shadow: 0 0 15rpx rgba(255, 255, 255, 0.5);
				}

				.bubble-1 {
					top: -5%;
					right: -5%;
					width: 320rpx;
					height: 320rpx;
					background: linear-gradient(45deg, rgba(255, 44, 60, 0.08), rgba(255, 92, 108, 0.06));
					animation: bubbleFloat1 24s ease-in-out infinite alternate;
					border: 1px solid rgba(255, 44, 60, 0.1);
				}

				.bubble-2 {
					bottom: -5%;
					left: -5%;
					width: 300rpx;
					height: 300rpx;
					background: linear-gradient(135deg, rgba(255, 44, 60, 0.07), rgba(255, 140, 124, 0.05));
					animation: bubbleFloat2 20s ease-in-out infinite alternate;
					border: 1px solid rgba(255, 140, 124, 0.1);
				}

				.bubble-3 {
					top: 15%;
					left: 10%;
					width: 220rpx;
					height: 220rpx;
					background: linear-gradient(225deg, rgba(74, 222, 128, 0.05), rgba(134, 239, 172, 0.05));
					animation: bubbleFloat3 22s ease-in-out infinite alternate;
				}

				.bubble-4 {
					top: 25%;
					right: 15%;
					width: 180rpx;
					height: 180rpx;
					background: linear-gradient(315deg, rgba(56, 189, 248, 0.05), rgba(125, 211, 252, 0.05));
					animation: bubbleFloat4 18s ease-in-out infinite alternate;
				}

				.bubble-5 {
					bottom: 30%;
					left: 20%;
					width: 160rpx;
					height: 160rpx;
					background: linear-gradient(90deg, rgba(232, 121, 249, 0.06), rgba(216, 180, 254, 0.05));
					animation: bubbleFloat5 26s ease-in-out infinite alternate;
				}
				
				.bubble-6 {
					bottom: 40%;
					right: 25%;
					width: 150rpx;
					height: 150rpx;
					background: linear-gradient(135deg, rgba(251, 113, 133, 0.05), rgba(253, 164, 175, 0.05));
					animation: bubbleFloat6 20s ease-in-out infinite alternate;
				}
				
				.bubble-7 {
					top: 45%;
					left: 35%;
					width: 140rpx;
					height: 140rpx;
					background: linear-gradient(225deg, rgba(251, 191, 36, 0.05), rgba(253, 224, 71, 0.05));
					animation: bubbleFloat7 23s ease-in-out infinite alternate;
				}
				
				.bubble-8 {
					top: 60%;
					right: 40%;
					width: 120rpx;
					height: 120rpx;
					background: linear-gradient(45deg, rgba(6, 182, 212, 0.05), rgba(125, 211, 252, 0.05));
					animation: bubbleFloat8 19s ease-in-out infinite alternate;
				}

				.dots {
					position: absolute;
					top: 20%;
					right: 10%;
					width: 250rpx;
					height: 250rpx;
					background-image: radial-gradient(rgba(255, 44, 60, 0.2) 1px, transparent 1px);
					background-size: 20rpx 20rpx;
					opacity: 0.15;
					animation: floatDots 30s ease-in-out infinite alternate;
				}

				.line {
					position: absolute;
					background-color: rgba(255, 44, 60, 0.1);
				}

				.line-1 {
					top: 40%;
					left: 0;
					width: 200rpx;
					height: 2rpx;
					transform: rotate(15deg);
					animation: floatLine1 15s ease-in-out infinite alternate;
				}

				.line-2 {
					bottom: 30%;
					right: 10%;
					width: 150rpx;
					height: 2rpx;
					transform: rotate(-10deg);
					animation: floatLine2 12s ease-in-out infinite alternate;
				}
			}

			.mpwx-login {
				min-height: 0;
				padding: 60rpx;

				.logo {
					margin-top: 180rpx;
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
				}

				.image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.btn {
				width: 100%;
				height: 100rpx;
				background-color: $-color-primary;
				margin: 100rpx auto 0rpx;
				border-radius: 50rpx;
				box-shadow: 0 8rpx 20rpx rgba(114, 106, 230, 0.2);
				transition: all 0.2s;
				position: relative;
				overflow: hidden;
			}

			.btn-hover {
				transform: scale(0.98);
				opacity: 0.9;
				box-shadow: 0 4rpx 10rpx rgba(255, 44, 60, 0.15);
			}

			.text-hover {
				opacity: 0.7;
			}

			.phone-btn {
				width: 100%;
				height: 100rpx;
				border: 1px solid #bbb;
				margin: 40rpx auto 0rpx;
				color: #666666;
				border-radius: 50rpx;
				transition: all 0.2s;
				background-color: rgba(255, 255, 255, 0.8);
				box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
			}

			.acount-login {
				padding: 60rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				min-height: 0;

				.logo {
					width: 180rpx;
					height: 180rpx;
					margin-bottom: 50rpx;
					margin-top: 50rpx;
					border-radius: 20rpx;
					box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
				}

				.input {
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					height: 100rpx;
					width: 100%;
					border: $-solid-border;
					margin-top: 30rpx;
					border-radius: 50rpx;
					background-color: rgba(255, 255, 255, 0.9);
					box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03);
				}

				.sms-btn {
					border: 1px solid $-color-primary;
					width: 176rpx;
					height: 60rpx;
					box-sizing: border-box;
					border-radius: 35rpx;
					font-size: 26rpx;
					transition: all 0.2s;

					&:active {
						transform: scale(0.98);
						opacity: 0.9;
					}
				}

				.wx-login {
					margin-top: 60rpx;

					.image {
						margin-top: 40rpx;
						width: 80rpx;
						height: 80rpx;
					}
				}
			}

			.checkbox-wrapper {
				display: flex;
				align-items: center;
				padding: 10rpx;

				.custom-checkbox {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 1px solid #ddd;
					margin-right: 10rpx;
					position: relative;
					background-color: #fff;
					transition: all 0.2s;

					&.checked {
						background-color: $-color-primary;
						border-color: $-color-primary;

						&:after {
							content: "";
							position: absolute;
							top: 6rpx;
							left: 10rpx;
							width: 8rpx;
							height: 14rpx;
							border-right: 2px solid #fff;
							border-bottom: 2px solid #fff;
							transform: rotate(45deg);
						}
					}
				}
			}

			.action-link {
				padding: 15rpx;
				position: relative;
				transition: all 0.2s;
			}

			.ripple-wrapper {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				pointer-events: none;
				border-radius: inherit;
				overflow: hidden;
			}

			.ripple-circle {
				position: absolute;
				width: 20px;
				height: 20px;
				background-color: rgba(255, 255, 255, 0.7);
				border-radius: 50%;
				transform: scale(0);
				animation-name: ripple-animation;
				animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				animation-fill-mode: forwards;
			}

			@keyframes ripple-animation {
				0% {
					transform: scale(0);
					opacity: 0.5;
				}
				40% {
					transform: scale(1);
					opacity: 0.4;
				}
				100% {
					transform: scale(4);
					opacity: 0;
				}
			}
		}

		.comfirm-box {
			text-align: center;
			padding: 60rpx 0 70rpx 0;
		}

		.agreement {
			color: $-color-primary;
			font-weight: bold;
			padding: 5rpx;
		}

		.disable {
			opacity: 0.5;
		}

		.text-xs {
			font-size: 24rpx;
			color: #888;
		}

		.primary {
			color: $-color-primary;
			font-weight: bold;
			padding: 0 5rpx;
		}

		.lighter {
			color: #888;
			font-size: 26rpx;
		}

		.ripple-effect {
			position: relative;
			overflow: hidden;
			animation: ripple 0.6s linear;
		}

		@keyframes ripple {
			0% {
				box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6), 0 0 0 10rpx rgba(255, 255, 255, 0.6), 0 0 0 20rpx rgba(255, 255, 255, 0.4);
			}
			100% {
				box-shadow: 0 0 0 10rpx rgba(255, 255, 255, 0), 0 0 0 20rpx rgba(255, 255, 255, 0), 0 0 0 40rpx rgba(255, 255, 255, 0);
			}
		}
	}
</style>